<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1080">
  <title>Cats</title>
  <style>
    body{
      margin: 0;
      overflow-x: hidden;
    }
    .fav-list{
      display: flex;
      flex-wrap: wrap;
      margin: 2px;
    }
    /* .fav-list::after{
      content: '';
      flex-grow: 999999999;
      order: 999999999;
    } */
    .fav-list > div{
      margin: 2px;
      background-color: violet;
      position: relative;
    }
    .fav-list > div > i {
      display: block;
      background-color: lightblue;
      /* display: none; */
    }
    .fav-list > div > img {
      position: absolute;
      vertical-align: bottom;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .fav-list > .placeholder{
      flex-grow: 100;
      flex-basis: 240px;
      height: 0;
      margin: 0;
    }
  </style>
</head>
<body ng-controller="Ctrl">

  <div class="fav-list">
    <div
      ng-repeat="img in imgs"
      style="flex-grow:{{img.width*100/img.height}};flex-basis:{{img.width*240/img.height}}px;">
      <i style="padding-bottom:{{img.height/img.width*100}}%"></i>
      <img ng-src="{{img.url}}"/>
    </div>
    <div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]" class="placeholder"></div>
  </div>
  
  <div class="how">
    The images are random, refresh to see another order, resize or zoom to see the dynamic layout effect, which is non-JS involved, here is the <a href="https://github.com/xieranmaya/blog/issues/6">implementation method</a>.
  </div>

<script src="angular.min.js"></script>
<script>
angular.module('app', [])

.controller('Ctrl', function($scope, $http) {
  $http.get('cats.json').success(function(imgs) {
    $scope.imgs = imgs.sort(function() {
      return 0.5 - Math.random()
    })
  })
})
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?9012d6e4790db334fc2e463c3d665824";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
